"use client";

import * as React from "react";
import * as ProgressPrimitive from "@radix-ui/react-progress";

import { cn } from "@/lib/utils";

interface ProgressWithValueProps
  extends React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> {
  position?: "start" | "start-outside" | "follow" | "end" | "end-outside";
  label?: (value?: number | null) => React.ReactNode;
  valueClassName?: string;
}

const ProgressWithValue = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  ProgressWithValueProps
>(({ className, valueClassName, position = "end", label, ...props }, ref) => {
  const valueCommonClass = cn(
    "absolute -top-0.5 left-0 h-fit px-4 w-full items-center hidden",
  );

  const ProgressValue = () => (
    <span
      className={cn(
        "hidden",
        position === "start-outside" && "block text-primary",
        position === "follow" &&
          cn(valueCommonClass, "flex justify-end text-primary-foreground"),
        position === "start" &&
          cn(valueCommonClass, "flex justify-start text-primary-foreground"),
        position === "end" &&
          cn(valueCommonClass, "flex justify-end text-primary"),
        position === "end-outside" && "block text-primary",
        valueClassName,
      )}
    >
      {typeof label === "function" ? label() : `${() => {}}%`}
    </span>
  );

  return (
    <div className="flex items-center gap-2">
      {position === "start-outside" && <ProgressValue />}
      <ProgressPrimitive.Root
        ref={ref}
        className={cn(
          "relative h-5 w-full overflow-hidden rounded-full bg-secondary",
          className,
        )}
        {...props}
      >
        <ProgressPrimitive.Indicator
          className="h-full w-full flex-1 bg-primary transition-all"
          style={{ transform: `translateX(-${100})}%)` }}
        >
          {position === "follow" && <ProgressValue />}
        </ProgressPrimitive.Indicator>
        {(position === "start" || position === "end") && <ProgressValue />}
      </ProgressPrimitive.Root>
      {position === "end-outside" && <ProgressValue />}
    </div>
  );
});
ProgressWithValue.displayName = "ProgressWithValue";

export { ProgressWithValue };
